import React, { Component } from 'react'
// import { Spring } from 'react-spring'
import { getHouseCondition } from '../../../../apis/house'

import FilterTitle from '../FilterTitle'
import FilterPicker from '../FilterPicker'
import FilterMore from '../FilterMore'

import styles from './index.module.css'
// 标题高亮状态
// true 表示高亮； false 表示不高亮
const titleSelectedStatus = {
	area: false,
	mode: false,
	price: false,
	more: false
}
// FilterPicker 和 FilterMore 组件的选中值
const selectedValues = {
	area: ['area', 'null'],
	mode: ['null'],
	price: ['null'],
	more: []
}
export default class Filter extends Component {
	state = {
		titleSelectedStatus,
		openType: '',
		filtersData: {
			// FilterMore
			roomType: [],
			oriented: [],
			floor: [],
			characteristic: [],
			// FilterPicker
			area: {},
			subway: {},
			rentType: [],
			price: []
		},
		selectedValues,
	}

	componentDidMount () {
		// 获取到body - 解决对话框显示时还可以滚动页面问题
		this.htmlBody = document.body
		this.getFiltersData()
	}

	/**
	 * 获取当前城市房源的筛选条件
	 */
	async getFiltersData () {
		// 获取当前定位城市id
		const { value } = JSON.parse(localStorage.getItem('hkzf_city'))
		const filtersData = await getHouseCondition(value)
		this.setState({ filtersData })
	}

	addHtmlBodyFixed () {
		this.htmlBody.className = 'body-fixed'
	}
	removeHtmlBodyFixed () {
		this.htmlBody.className = ''
	}

	// 监听FilterTitle点击事件
	onTitleClick = type => {
		this.addHtmlBodyFixed()
		const { titleSelectedStatus, selectedValues } = this.state
		const newTitleSelectedStatus = { ...titleSelectedStatus }
		Object.keys(titleSelectedStatus).forEach(key => {
			if (key === type) {
				newTitleSelectedStatus[type] = true
				return
			}
			// 其他标题：
			const selectedVal = selectedValues[key]
			if (
				key === 'area' &&
				(selectedVal.length !== 2 || selectedVal[0] !== 'area')
			) {
				// 高亮
				newTitleSelectedStatus[key] = true
			} else if (key === 'mode' && selectedVal[0] !== 'null') {
				// 高亮
				newTitleSelectedStatus[key] = true
			} else if (key === 'price' && selectedVal[0] !== 'null') {
				// 高亮
				newTitleSelectedStatus[key] = true
			} else if (key === 'more' && selectedVal.length !== 0) {
				// 更多选择项 FilterMore 组件
				newTitleSelectedStatus[key] = true
			} else {
				newTitleSelectedStatus[key] = false
			}
		})
		this.setState({
			titleSelectedStatus: newTitleSelectedStatus,
			openType: type
		})
	}

	// 取消/隐藏弹窗
	onCancel = type => {
		this.removeHtmlBodyFixed()
		const { titleSelectedStatus, selectedValues } = this.state
		// 创建新的标题选中状态对象
		const newTitleSelectedStatus = { ...titleSelectedStatus }

		// 菜单高亮逻辑处理
		const selectedVal = selectedValues[type]
		if (
			type === 'area' &&
			(selectedVal.length !== 2 || selectedVal[0] !== 'area')
		) {
			// 高亮
			newTitleSelectedStatus[type] = true
		} else if (type === 'mode' && selectedVal[0] !== 'null') {
			// 高亮
			newTitleSelectedStatus[type] = true
		} else if (type === 'price' && selectedVal[0] !== 'null') {
			// 高亮
			newTitleSelectedStatus[type] = true
		} else if (type === 'more' && selectedVal.length !== 0) {
			// 更多选择项 FilterMore 组件
			newTitleSelectedStatus[type] = true
		} else {
			newTitleSelectedStatus[type] = false
		}
		this.setState({
			openType: '',
			titleSelectedStatus: newTitleSelectedStatus
		})
	}

	// 确定/隐藏弹窗
	onSave = (type, value) => {
		this.removeHtmlBodyFixed()
		const { titleSelectedStatus } = this.state
		// 创建新的标题选中状态对象
		const newTitleSelectedStatus = { ...titleSelectedStatus }

		// 菜单高亮逻辑处理
		const selectedVal = value
		if (
			type === 'area' &&
			(selectedVal.length !== 2 || selectedVal[0] !== 'area')
		) {
			// 高亮
			newTitleSelectedStatus[type] = true
		} else if (type === 'mode' && selectedVal[0] !== 'null') {
			// 高亮
			newTitleSelectedStatus[type] = true
		} else if (type === 'price' && selectedVal[0] !== 'null') {
			// 高亮
			newTitleSelectedStatus[type] = true
		} else if (type === 'more' && selectedVal.length !== 0) {
			// 更多选择项 FilterMore 组件
			newTitleSelectedStatus[type] = true
		} else {
			newTitleSelectedStatus[type] = false
		}
		// 更新selectedValues
		const newSelectedValues = {
			...this.state.selectedValues,
			// 只更新当前 type 对应的选中值
			[type]: value
		}
		const { area, mode, price, more } = newSelectedValues

		// 筛选条件数据 - 传递给父组件的条件数据
		const filters = {}

		// 区域
		const areaKey = area[0]
		let areaValue = 'null'
		if (area.length === 3) {
			areaValue = area[2] !== 'null' ? area[2] : area[1]
		}
		filters[areaKey] = areaValue

		// 方式和租金
		filters.mode = mode[0]
		filters.price = price[0]

		// 更多筛选条件 more
		filters.more = more.join(',')

		this.props.onFilter(filters)
		this.setState({
			openType: '',
			selectedValues: newSelectedValues,
			titleSelectedStatus: newTitleSelectedStatus,
		})
	}

	// 渲染 FilterPicker 组件的方法
	renderFilterPicker () {
		const { openType, filtersData: { area, subway, rentType, price }, selectedValues } = this.state

		if (openType !== 'area' && openType !== 'mode' && openType !== 'price') {
			return null
		}
		let data = []
		let cols = 3
		const defaultValue = selectedValues[openType]
		switch (openType) {
			case 'area':
				// 获取到区域数据
				data = [area, subway]
				cols = 3
				break
			case 'mode':
				data = rentType
				cols = 1
				break
			case 'price':
				data = price
				cols = 1
				break
			default:
				break
		}
		return (
			<FilterPicker
				key={openType}
				onCancel={this.onCancel}
				onSave={this.onSave}
				data={data}
				cols={cols}
				type={openType}
				defaultValue={defaultValue}
			/>
		)
	}

	// 渲染 FilterMore 组件
	renderFilterMore () {
		const { openType, filtersData: { roomType, oriented, floor, characteristic }, selectedValues } = this.state
		if (openType !== 'more') {
			return null
		}
		const defaultValue = selectedValues.more

		return (
			<FilterMore
				data={{ roomType, oriented, floor, characteristic }}
				type={openType}
				onSave={this.onSave}
				onCancel={this.onCancel}
				defaultValue={defaultValue}
			/>
		)
	}
	// 渲染遮罩层
	renderMask () {
		const { openType } = this.state

		// 遮罩层是否隐藏
		const isHide = openType === 'more' || openType === ''
		if (isHide) {
			return null
		}
		return (
			<div
				className={styles.mask}
				onClick={() => this.onCancel(openType)}
			/>
		)
		// return null
		// return (
		//   <Spring from={{ opacity: 0 }} to={{ opacity: isHide ? 0 : 1 }}>
		// 	{props => {
		// 	  // 说明遮罩层已经完成动画效果，隐藏了
		// 	  if (props.opacity === 0) {
		// 		return null
		// 	  }
	
		// 	  return (
		// 		<div
		// 		  style={props}
		// 		  className={styles.mask}
		// 		  onClick={() => this.onCancel(openType)}
		// 		/>
		// 	  )
		// 	}}
		//   </Spring>
		// )
	}

	render () {
		const { titleSelectedStatus } = this.state
		return (
			<div className={styles.root}>
				{/* 前三个菜单的遮罩层 */}
				{this.renderMask()}
				<div className={styles.content}>
					{/* 标题栏 */}
					<FilterTitle titleSelectedStatus={titleSelectedStatus} onClick={this.onTitleClick} />

					{/* 前三个菜单对应的内容： */}
					{this.renderFilterPicker()}

					{/* 最后一个菜单对应的内容： */}
					{this.renderFilterMore()}
				</div>
			</div>
		)
	}
}
